<template>
  <div>
    <el-dialog
      title="任务详情"
      :visible.sync="dialogVisible"
      :modal="true"
      :appendToBody="true"
      width="80%"
      v-dialog-drag
      :close-on-click-modal="false"
      top="3vh"
      class="report-text-form"
      @close="handleClose()"
      @open="handleOpen()"
    >
      <el-form :model="taskDetail" ref="ruleForm" label-width="100px" class='task-detail-form'>
        <el-form-item label="任务ID">
          <div class="text-value">{{taskDetail.taskNo}}</div>
        </el-form-item>

        <el-form-item label="任务名称">
          <div class="text-value">{{taskDetail.taskName}}</div>
        </el-form-item>

        <el-form-item label="所属工厂">
          <div class="text-value">{{taskDetail.factoryDeptName}}</div>
        </el-form-item>

        <el-form-item label="关联改善点">
          <span class="text-value">{{taskDetail.refineReportName || "-"}}</span>
          <el-button type="text" class="look-point" @click="lookPoint(taskDetail)" v-if='taskDetail.refineReportId'>查看内容</el-button>
        </el-form-item>

        <el-form-item label="所属车间">
          <div class="text-value">{{taskDetail.workshopName}}</div>
        </el-form-item>

        <el-form-item label="所属产线">
          <div class="text-value">{{taskDetail.lineName}}</div>
        </el-form-item>

        <el-form-item label="执行人">
          <div class="text-value">{{taskDetail.execName}}</div>
        </el-form-item>

        <el-form-item label="执行时间">
          <div class="text-value">{{taskDetail.execStartDate}} - {{taskDetail.execEndDate}} </div>
        </el-form-item>

        <el-form-item label="任务内容" style="width: 100%;">
          <div class="text-value">{{taskDetail.taskDes}}</div>
        </el-form-item>

        <el-form-item label="附件" style="width:100%">
          <template v-if='taskDetail.orderFiles && taskDetail.orderFiles.length'>
            <div class="text-value" v-for="item in taskDetail.orderFiles" :key='item.id'>
              <el-link type="primary" :underline="false" @click="preview(item)">{{item.fileName}}</el-link>
            </div>
          </template>
          <div v-else>-</div>
        </el-form-item>
      </el-form>
      <el-divider></el-divider>

      <el-form label-width="100px">
        <el-form-item label="当前状态" style="width: 100%;">
          <div class="text-value">{{taskStatusMap[taskDetail.status]}}</div>
        </el-form-item>

        <el-timeline v-if='taskDetail.records && taskDetail.records.length'>
          <el-timeline-item
            :color="index == 0 ?'#34855b' : ''"
            v-for="(activity, index) in taskDetail.records"
            :key="index"
            type="info"
            size="large">
            <span class="time">{{activity.execDate}}</span>
            <div class="record-status">{{taskRecordsMap[activity.execType]}}
              <el-button type="text" class="look" v-if='["2","5"].includes(activity.execType)' @click="lookDetail(activity)">查看内容</el-button>
            </div>
            <div class="handler">{{activity.execName}}
              <span class="processedName" v-if='activity.execType == 3'>转办至{{activity.processedName}}</span>
            </div>
            <div class="execDes">{{activity.execDes}}</div>
          </el-timeline-item>
        </el-timeline>
      </el-form>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
      </span>
    </el-dialog>
    <record-dialog
      :visible.sync="recordDialog.visible"
      :row="recordDialog.row"
      :mode="recordDialog.mode"
    />
    <point-detail-dialog
      :visible.sync="pointLookDialog.visible"
      :row="pointLookDialog.row"
    />
  </div>
</template>
<script>
  import axios from 'axios'
  import { getToken } from '@/utils/auth'
  import service from "../../../utils/request";
  import { GEN_SERVER } from '@/config/baseUrl'
  import { downloadFile } from '@/utils/file'
  import { parseTime } from '@/utils/eam'
  import {taskStatusMap,taskRecordsMap} from "../enum";
  import {taskDetail} from "@/api/leanTask/report";
  import recordDialog from "./recordDialog";
  import pointDetailDialog from "../components/pointDetailDialog";
export default {
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    row: {
      type: Object,
      default: ()=>{}
    }
  },
  data() {
    return {
      recordDialog:{
        visible: false,
        row: null,
        mode:null
      },
      pointLookDialog:{
        visible: false,
        row: null
      },
      taskDetail:{},
      saveloading: false,
      taskStatusMap,
      taskRecordsMap
    };
  },
  computed: {
    dialogVisible: {
      set(val) {
        this.$emit("update:visible", val)
      },
      get() {
        return this.visible
      }
    }
  },
  methods: {
    handleClose() {
      this.saveloading = false;
      this.taskDetail = {};
    },

    handleOpen() {
      this.getTaskDetail();
    },

    getTaskDetail(){
      let id = "";
      if(this.row?.refineOrderId){
        id = this.row.refineOrderId
      }else{
        id = this.row.id
      }
      taskDetail(id)
      .then(res=>{
        if (res.code == 200 && res.data) {
          this.taskDetail = res.data;
        } else {
          this.taskDetail = {};
        }
      }).catch(() => {
        this.taskDetail = {};
      })
    },

    preview(item){
      axios({
        baseURL:service.baseURL + GEN_SERVER['form-server'],
        url:'/refine/report/byte/down',
        method:"get",
        params:{id:item.id},
        headers: {Authorization:'Bearer ' + getToken()},
        responseType: 'blob'
      }).then(res => {
        let count = item.fileName.lastIndexOf(".");
        let fileName = item.fileName.slice(0,count);
        let suffix = item.fileName.slice(count);
        downloadFile(res.data,`${fileName}${parseTime(new Date(), '{y}{m}{d}')}${suffix}`)
        this.saveloading = false
      }).catch(() => {
        this.msgError("操作失败")
        this.saveloading = false
      })
    },

    lookDetail(item){
      this.recordDialog.row = item;
      this.recordDialog.row.taskName = this.taskDetail.taskName;
      this.recordDialog.row.taskDes = this.taskDetail.taskDes;
      this.recordDialog.visible = true
    },
    lookPoint(item){
      this.pointLookDialog.row = item;
      this.pointLookDialog.visible = true;
    }
  },

  components:{
    recordDialog,
    pointDetailDialog
  }
};
</script>
<style lang="scss" scoped>
.el-form {
  display: flex;
  justify-content: space-between;
  flex-flow: wrap;
  .el-form-item {
    width: 49%;
  }
  .el-date-editor.el-input,
  .el-select {
    width: 100%;
  }
}
.el-timeline {
  margin: 0 160px;
  ::v-deep .el-timeline-item__content{
    position:relative;
    font-size: 0.9rem;
  }
}

.time {
  position: absolute;
  left: -180px;
  top:2px;
  color:#666
}
.record-status{
  display: flex;
  align-items: center;
  .look{
    margin-left: 10px;
  }
}
.handler{
  color:#606266;
  margin-top: 2px;
  margin-bottom: 6px;
}
.processedName{
  color:#999
}
.execDes{
  color:#999
}
.text-value{
  font-size: 0.875rem;
  line-height:2.25rem;
  color:#666;
  font-weight: 700;
}
.look-point{
  margin-left:20px
}
.report-text-form{
  ::v-deep .el-dialog .el-dialog__body{
    max-height: calc(100vh - 16rem);
    .task-detail-form{
      .el-form-item:last-child{
        margin-bottom:0;
      }
    }
    .el-divider--horizontal{
      margin:16px 0
    }
  };
}
</style>
